<template>
	<view :style="themeColor">
		<view class="page">
			<view class="flex align-stretch benben-position-layout flex myNews_flex_0"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex align-center justify-between flex-sub myNews_fd0_0'>
					<view class='flex align-center myNews_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
						<text class='fu-iconfont2  myNews_fd0_0_c0_c0'>&#xE794;</text>
					</view>
					<view class='flex align-center'>
						<text class='myNews_fd0_0_c1_c0'
							style="font-family: Alimama DongFangDaKai, Alimama DongFangDaKai;">消息</text>
					</view>
					<view class='flex align-center myNews_fd0_0_c0'>
					</view>
				</view>

			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
			<view class="loading_css" v-if="isShow">
				<u-loading size="36" color="#F35D2A"></u-loading>
				<view>加载中</view>
			</view>
			<block v-else>
				<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout">
					<!-- <view class='flex flex-wrap align-center justify-between myNews_fd1_0'>
						<view class='flex flex-direction flex-wrap align-center myNews_fd1_0_c0'
							@tap.stop="handleJumpDiy" data-type="navigateTo"
							:data-url="`/pages/grzx/myNews/likeandPage?type=1`">
							<image class='myNews_fd1_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"674.png"'></image>
							<text class='myNews_fd1_0_c0_c1'
								style="font-family: Alimama DongFangDaKai, Alimama DongFangDaKai;">赞和收藏</text>
							<benben-message-num class='myNews_fd1_0_c0_c2' size='22' color='#FFFFFF'
								:message-num="numsInfo.zs_nums" background-color='#AD3823'>
							</benben-message-num>
						</view>
						<view class='flex flex-direction flex-wrap align-center myNews_fd1_0_c0'
							@tap.stop="handleJumpDiy" data-type="navigateTo"
							:data-url="`/pages/grzx/myNews/newAttention`">
							<image class='myNews_fd1_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"675.png"'></image>
							<text class='myNews_fd1_0_c0_c1'
								style="font-family: Alimama DongFangDaKai, Alimama DongFangDaKai;">关注</text>
							<benben-message-num class='myNews_fd1_0_c0_c2' size='22' color='#FFFFFF'
								:message-num="numsInfo.g_nums" background-color='#AD3823'>
							</benben-message-num>
						</view>
						<view class='flex flex-direction flex-wrap align-center myNews_fd1_0_c0'
							@tap.stop="handleJumpDiy" data-type="navigateTo"
							:data-url="`/pages/grzx/myNews/likeandPage?type=2`">
							<image class='myNews_fd1_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"676.png"'></image>
							<text class='myNews_fd1_0_c0_c1'
								style="font-family: Alimama DongFangDaKai, Alimama DongFangDaKai;">评论和@</text>
							<benben-message-num class='myNews_fd1_0_c0_c2' size='22' color='#FFFFFF'
								:message-num="numsInfo.c_nums" background-color='#AD3823'>
							</benben-message-num>
						</view>
					</view> -->
					<!-- <view class='flex flex-direction align-stretch'>
						<template v-for='(item,key0) in dataList'>
							<view class='flex flex-wrap align-center myNews_fd1_1_c0' @tap.stop="goListFunc(item.msg_type)"
								v-if=" item.msg_type!='1'" :key='key0'>
								<view class='flex flex-wrap align-center myNews_fd1_0_c0'>
									<image class='myNews_fd1_1_c0_c0_c0' mode="aspectFit" :src='STATIC_URL+"673.png"'
										v-if=" item.msg_type=='3'"></image>
									<image class='myNews_fd1_1_c0_c0_c0_1' mode="aspectFit" :src='STATIC_URL+"35.png"'
										v-if=" item.msg_type=='2'"></image>
									<benben-message-num class='myNews_fd1_1_c0_c0_c1' :message-num="item.num" size='24'
										color='#fff' background-color='red'>
									</benben-message-num>
								</view>
								<view class='flex flex-direction flex-wrap align-stretch flex-sub myNews_fd1_1_c0_c1'>
									<view class='flex flex-wrap align-center myNews_fd1_1_c0_c1_c0'>
										<text class='flex-sub myNews_fd1_1_c0_c1_c0_c0'>{{item.name}}</text>
										<text class='myNews_fd1_1_c0_c1_c0_c1'>{{item.create_time}}</text>
									</view>
									<text class='myNews_fd1_1_c0_c1_c1'>{{item.content}}</text>
								</view>
							</view>
						</template>
					</view> -->
					<view class='flex flex-direction align-stretch'>
						<view class='flex myNews_fd1_1_c0' style="background-color: #fff;" :style="item.msg_type == 3 ? 'marginTop: 20rpx;' : ''" v-for="(item, index) in chatList"
							:key='index' @tap.stop="goNews(item.msg_type)">
							<view class='flex myNews_fd1_0_c0'>
								<image class='myNews_fd1_1_c0_c0_c0' mode="aspectFill" :src='item.thumb'></image>
								<benben-message-num class='myNews_fd1_1_c0_c0_c1' :message-num="item.unread_nums"
									size='24' color='#fff' background-color='#F35D2A'>
								</benben-message-num>
							</view>
							<view class='myNews_fd1_1_c0_c1' :style="(item.msg_type == 2 || item.msg_type == 3) ? 'borderBottom: 0;' : ''">
								<view class='flex flex-wrap justify-between align-center myNews_fd1_1_c0_c1_c0'>
									<text class='flex-sub myNews_fd1_1_c0_c1_c0_c0'>{{item.name}}</text>
									<text class='myNews_fd1_1_c0_c1_c0_c1'>{{item.time}}</text>
								</view>
								<view class='myNews_fd1_1_c0_c1_c1' v-if="item.msg_content">{{item.msg_content}}
								</view>
								<view class='myNews_fd1_1_c0_c1_c1' v-else>没有消息</view>
							</view>
						</view>
						
					</view>
				</view>
			</block>

		</view>
	</view>
</template>
<script>
	import {
		validate
	} from '@/common/utils/validate.js'
	export default {
		components: {},


		data() {
			return {
				"dataList": [],
				"chatList": [],
				"chatMessage": {
					"chat_url": ""
				},
				"numsInfo": {},
				"isShow": true,
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},

		},
		watch: {},
		onLoad(options) {

		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {
			this.getNews();
			this.getNewsNum();
		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			// 获取消息类型  6553176408c13
			getNews() {
				this.$api.post(global.API_VERSION + '6553176408c13', {

				}).then(res => {
					this.isShow = false;
					if (res.data.code == 1) {
						this.chatList = res.data.data;
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			getNewsNum() {
				this.$api.post(global.API_VERSION + '6553174f6dafa', {

				}).then(res => {
					// console.log(res);
					if (res.data.code == 1) {
						this.numsInfo = res.data.data;
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			// 跳转消息列表 1平台公告  3系统订单
			goNews(msg_type) {
				if (msg_type == 1) {
					uni.navigateTo({
						url: '/pages/grzx/myNews/platformAnnouncement'
					})
				} else if (msg_type == 2) {
					uni.navigateTo({
						url: '/pages/grzx/myNews/xitongNews'
					})
				} else if (msg_type == 3) {
					uni.navigateTo({
						url: '/pages/grzx/myNews/orderMessages'
					})
				}
			},
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background-size: 100% 100%;
		background-color: #f8f8f8;
	}

	.myNews_flex_0 {
		background-color: #FFFFFF;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.myNews_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 500;
		color: #333;
	}

	.myNews_fd0_0_c0_c0 {
		font-size: 36rpx;
		font-weight: 500;
		color: #333;
	}

	.myNews_fd0_0_c0 {
		width: 180rpx;
	}

	.myNews_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
		line-height: 88rpx;
	}

	.myNews_fd1_1_c0_c1_c1 {
		line-height: 33rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #666;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.myNews_fd1_1_c0_c1_c0_c1 {
		line-height: 28rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #bfbfbf;
		margin: 0rpx 0rpx 0rpx 24rpx;
	}

	.myNews_fd1_1_c0_c1_c0_c0 {
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.myNews_fd1_1_c0_c1_c0 {
		width: 100%;
		margin: 0rpx 0rpx 17rpx 0rpx;
	}

	.myNews_fd1_1_c0_c1 {
		width: calc(100% - 120rpx);
		margin: 0rpx 0rpx 0rpx 24rpx;
		border-bottom: 1rpx solid #eee;
		padding-bottom: 32rpx;
	}

	.myNews_fd1_1_c0_c0_c1 {
		position: absolute;
		top: 0rpx;
		right: 0rpx;
	}

	.myNews_fd1_1_c0_c0_c0_1 {
		width: 90rpx;
		height: 90rpx;
		border-radius: 45rpx 45rpx 45rpx 45rpx;
	}

	.myNews_fd1_1_c0_c0_c0 {
		width: 96rpx;
		height: 96rpx;
		border-radius: 48rpx;
	}

	.myNews_fd1_1_c0 {
		// border-bottom: 1px solid #eee;
		padding: 24rpx 32rpx 0rpx 32rpx;
		// padding: 0rpx 0rpx 25rpx 0rpx;
		// margin-bottom: 24rpx;
	}

	.myNews_fd1_0_c0_c2 {
		position: absolute;
		top: -10rpx;
		right: 0rpx;
	}

	.myNews_fd1_0_c0_c1 {
		color: #FFFFFF;
		font-size: 30rpx;
		font-weight: 400;
		margin: 20rpx 0rpx 0rpx 0rpx;
	}

	.myNews_fd1_0_c0_c0 {
		width: 96rpx;
		height: 96rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.myNews_fd1_0_c0 {
		position: relative;
	}

	.myNews_fd1_0 {
		padding: 72rpx 74rpx 75rpx 76rpx;
	}
</style>